<template>
  <div id="login">
    <div id="header" style="
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 80px;
    padding-top: 80px;
">后台管理</div>
  <div id="loginform">
    <el-row>
      <el-col :span="8"></el-col>
      <el-col :span="6">
            <el-form :model="form" label-width="120px">
            <el-form-item label="账号">
              <el-input v-model="form.account" size="large" placeholder="请输入账号"/>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" type="password" size="large" placeholder="请输入密码"/>
            </el-form-item>
              <el-form-item>
              <el-button type="primary" @click="onSubmit" style="width:200px;">登录</el-button>
            </el-form-item>
          </el-form>
      </el-col>
      <el-col :span="6">
      </el-col>
    </el-row>
  </div>
 
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import {useStore}  from 'vuex';
import {useRouter}  from 'vue-router'
import {login}  from '../../api/login.js'

const router = useRouter()
const store  = useStore();
// do not use same name with ref
const form = reactive({
  account: '',
  password: '',
})

const onSubmit = () => {
  login({account:form.account,password:form.password}).then(res=>{
      localStorage.setItem('token',res.data.token);
      localStorage.removeItem('menu');
      router.push('/index');
  })
}
</script>
<style scoped>

</style>